import style from './button.less'
import '../icons/loading.js'

class AnButton extends HTMLElement {
    static get observedAttributes() {
        return [
            'type',
            'size',
            'round',
            'block',
            'loading',
            'disabled',
        ]
    }
    constructor() {
        super()
        const shadowRoot = this.attachShadow({ mode: 'open' })
        shadowRoot.innerHTML = `<style>${style}</style>
            <span><slot></slot></span>`
    }

    /**
     * 更新属性
     * @param {string} name 
     * @param {string} oldValue 
     * @param {string} newValue 
     */
    updateProp(name, oldValue, newValue) {
        switch (name) {
            case 'loading': {
                this.setLoading()
                break
            }
            default:
                break
        }
    }

    setLoading() {
        console.log('this.loading', this.loading)
        if (!this.loading) {
            return
        }
        // if (this.isValue(this.loading, 'loading')) {
        let el = this.shadowRoot.querySelector('an-icon-loading')
        if (!el) {
            el = document.createElement('an-icon-loading')
            console.log(el)
            const referenceNode = this.shadowRoot.children[0]
            this.shadowRoot.insertBefore(el, referenceNode)
        }
        // } else {
        //     const el = this.shadowRoot.querySelector('an-icon-loading')
        //     if (el) {
        //         this.shadowRoot.removeChild(el)
        //     }
        // }
    }

    // 生命周期，挂载后回调
    connectedCallback() {
        this.setLoading()
        console.log('connectedCallback')
    }
    // 属性更新后回调
    attributeChangedCallback(name, oldValue, newValue) {
        console.log('attributeChangedCallback')
    }
    // 生命周期，卸载载后回调
    disconnectedCallback() {
        console.log('disconnectedCallback')
    }
    // 绑定事件快捷函数
    bind(el, eventName, eventHandler, options) {
        el.addEventListener(eventName, eventHandler, options)
    }
    unbind(el, eventName, eventHandler, options) {
        el.removeEventListener(eventName, eventHandler, options)
    }
    /**
     * 提交发布事件给外部
     * https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent
     * @param {String} eventName 
     * @param {Object} customEventInit 
     * @returns 
     */
    emit(eventName, customEventInit) {
        return this.dispatchEvent(new CustomEvent(eventName, customEventInit))
    }
    // 单个选择器
    qs(selector) {
        return this.shadowRoot.querySelector(selector)
    }

    set type(value) { this.setAttribute('type', value) }
    get type() { return this.getAttribute('type') }

    set size(value) { this.setAttribute('size', value) }
    get size() { return this.getAttribute('size') }

    set round(value) { this.setAttribute('round', value) }
    get round() { return this.getAttribute('round') !== null }

    set block(value) { this.setAttribute('block', value) }
    get block() { return this.getAttribute('block') !== null }

    set loading(value) { this.setAttribute('loading', value) }
    get loading() { return this.getAttribute('loading') !== null }

    set disabled(value) { this.setAttribute('disabled', value) }
    get disabled() { return this.getAttribute('disabled') !== null }
}

if (!customElements.get('an-button')) {
    customElements.define('an-button', AnButton)
}